<script setup>

import CarouselView from "./top/CarouselView.vue";
import SearchView from "./search/SearchView.vue";
import LevelView from "./bottom/LevelView.vue";
import RegionView from "./bottom/RegionView.vue";
import CardView from "./bottom/CardView.vue";
import Tip from "./tip/TipsView.vue";
import {ref, onMounted} from 'vue'
import {reqHospital} from "@/api/home/index.js";
// 导入请求接口获取医院列表
onMounted(() => {
  getHospitalList()
})

// 存储医院信息数组
const hospitalList = ref([])
const getHospitalList = async () => {
  const res = await reqHospital(pageNo.value, pageSize.value)
  if (res.code === 200) {
    hospitalList.value = res.data.content;
    total.value = res.data.totalElements;
  }
}

// 分页器相关
const total = ref(0)
const pageNo = ref(1)
const pageSize = ref(10)
const handleSizeChange = (size) => {
  getHospitalList()
}
const currentChange = () => {
  getHospitalList()
}

</script>

<template>
  <div class="home">
    <!-- 轮播图-->
    <CarouselView/>
    <!-- 首页搜索医院的表单区域 -->
    <SearchView/>

    <!-- 底部展示医院的结构 -->
    <el-row gutter="20">
      <el-col :span="19">
        <!-- 等级筛选子组件-->
        <LevelView/>
        <!-- 地区筛选子组件-->
        <RegionView/>
        <!-- 医院名称筛选子组件-->
        <div class="hospital">
          <CardView class="item" v-for="(item, index) in hospitalList" :key="item.id" :hospitalInfo="item"/>
        </div>

        <!-- 分页器-->
        <el-pagination
            style="margin: 15px 0px;"
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10,15, 20]"
            :background="true"
            layout="prev, pager, next, jumper, ->,total, sizes"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="currentChange"
        />
      </el-col>


      <el-col :span="5">
        <!-- 右侧提示信息组件-->
        <Tip />
      </el-col>
    </el-row>

  </div>

</template>

<style scoped lang="scss">
img {
  width: 100%;
  height: 350px;
}

.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 5px 0;
  }
}

</style>